<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <link
      href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"
      rel="stylesheet"
      type="text/css"
    /> -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="demo">
      <!-- <button @click="show=!show">Toogle Render</button> -->
      <!-- 过渡例子
        <button @click="show=!show">Toggle</button>
        <transition name="fade">
            <p v-if="show">Hello</p>
        </transition> 
      <br />
      <button @click="show=!show">Toggle Render</button>
      <transition name="slide-fade">
        <p v-if="show">WJA</p>
      </transition>
      -->
      <!--  CSS动画
      <button @click="show=!show">Toggle Render</button>
      <transition name="bounce">
        <p v-if="show">
            1、上网查询怎么使用我们的广告机软件控制系统，不让用户进行一些特殊的操作，比如不能调用只有超级管理员才能进行的创建用户，修改系统设置等操作（1.5h、100%）
            2、获取导航机、广告机的源代码，查看代码，分析业务逻辑（1h、100%）
            3、给winform程序添加监听事件，监听用户按下的按键（1h、100%）
            4、调试程序发下添加的事件监听程序没有作用，从新创建一个winform程序添加监听事件是有效果的（1h、100%）
            5、经过排查发下是广告机中嵌套的浏览器把按键事件阻止了（1.5h、100%）
            6、排查【国产服务器-自助服务机VUE版本】首页--大会服务--线下选展位招聘会--单位预定--如果当天已经预定过摊位，再点击其他摊位弹出的提示框，弹出了多次 问题（1.5h、10%）
        </p>
      </transition> -->
      <!-- 使用过渡和动画
      <button @click="show=!show">Toogle Render</button>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
        :duration="{enter:500,leave:800}"
      >
        <p v-if="show">Hello</p>
      </transition> -->
      <!-- 过渡中的Javascript钩子函数
      <button @click="show=!show">Toogle Render</button>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:enter-cancelled="enterCancelled"
        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        v-on:after-leave="afterLeave"
        v-on:leave-cancelled="leaveCancelled"
      >
        <p v-if="show">Hello Vue</p>
      </transition> -->
      <!--   <transition
        appear
        appear-class="custom-appear-class"
        appear-to-class="custom-appear-to-class"
        appear-active-class="custom-appear-active-class"
        v-on:before-appear="customBeforeAppearHook"
        v-on:appear="customAppearHook"
        v-on:after-appear="customAfterAppearHood"
        v-on:appear-cancelled="customAppearCancelledHook"
      >
        <p v-if="show">Hello WJA</p>
      </transition> -->
      <!-- 过渡模式 -->
      <!--     <transition name="fade" mode="out-in">
        <button  @click="show=!show">{{buttonMessage}}</button>
      </transition> -->
      <!-- 列表的进入/离开过渡 -->
      <div id="list-demo">
        <button @click="add">Add</button>
        <button @click="remove">Remove</button>
        <transition-group name="list" tag="p">
          <span v-for="item in items" v-bind:key="item" class="list-item">{{item}}</span>
        </transition-group>
      </div>

    </div>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
      new Vue({
        el: "#demo",
        data: {
          show: true,
          items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
          nextNum: 10,
        },
        computed: {
          buttonMessage: function () {
            switch (this.show) {
              case true:
                return "on";
                break;
              case false:
                return "off";
                break;
            }
          },
        },
        methods: {
          /* 
          这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

          当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，
          它们将被同步调用，过渡会立即完成。
          
          推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。
          这也可以避免过渡过程中 CSS 的影响。
          */
          /*

          beforeEnter:function(el){
            console.log(el,'进入中......')
          },
          // 当与css结合使用时，回调函数done是可选择的
          enter:function(el,done){
            console.log('进入结束了');
            done();
          },
          afterEnter:function(el){
            console.log('进入之后了。。。。。');
          },
          enterCancelled:function(el){
            console.log(el,'取消进入了');
          },
          beforeLeave:function(el){
            console.log(el,'离开之前');
          },
          leave:function(el,done){
            console.log(el,'已经离开了');
            done();
          },
          afterLeave:function(el){
            console.log(el,'离开之后');
          },
          leaveCancelled:function(el){
            console.log(el,'取消离开了');
          } 

          */

          randomIndex: function () {
            return Math.floor(Math.random() * this.items.length);
          },
          add: function () {
            this.items.splice(this.randomIndex(), 0, this.nextNum++);
          },
          remove: function () {
            this.items.splice(this.randomIndex(), 1);
          },
        },
      });
    </script>
    <style>
      /* .fade-leave-active below version 2.1.8 */
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }

      /* 可以设置不同的进入和离开动画 */
      /* 设置持续时间和动画函数 */
      .slide-fade-enter-active {
        transition: all 0.3s ease;
      }
      .slide-fade-leave-active {
        transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
      }
      .slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
      }

      .bounce-enter-active {
        animation: bounce-in 0.5s;
      }
      .bounce-leave-active {
        animation: bounce-in 0.5s reverse;
      }
      @keyframes bounce-in {
        0% {
          transform: scale(0);
        }
        50% {
          transform: scale(1.5);
        }
        100% {
          transform: scale(1);
        }
      }

      /* 列表的进入/离开过渡 */
      .list-item {
        display: inline-block;
        margin-right: 10px;
      }
      .list-enter-active,
      .list-leave-active {
        transition: all 1s;
      }
      .list-enter,
      .list-leave-to {
        opacity: 0;
        transform: translateY(30px);
      }
    
     
    </style>
  </body>
</html>
